<template>
    <div id="header">
<!--        logo盒子-->
        <div id="logo-box">
            <img src="http://course.myhope365.com/img/logo-header.08ec1297.png" alt="">
        </div>
<!--        小导航-->
        <topNavlist v-show="isShow"></topNavlist>
<!--        搜索框-->
        <div id="searchBox" :class="[isShow?'':'marginLeft']">
            <el-input placeholder="请输入内容" id="topNavSearchInput"></el-input>
            <el-button type="primary" icon="el-icon-search" id="topNavSearchBtn">搜索</el-button>
        </div>
<!--        登录盒子-->
        <div id="login-box" :class="[isShow?'':'marginLeft']">
<!--            购物车-->
            <svg t="1639809567818" class="icon" @click="dialogVisible = true" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3163" width="20" height="20"><path d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z" p-id="3164" fill="#bfbfbf"></path><path d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z" p-id="3165" fill="#bfbfbf"></path><path d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z" p-id="3166" fill="#bfbfbf"></path><path d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z" p-id="3167" fill="#bfbfbf"></path></svg>
            <div style="width: 1px;height: 18px;margin: 2px 10px 0px;background-color: lightgray;"></div>
<!--            登录注册按钮-->
            <div class="login-btn" @click="dialogVisible = true" v-if="$store.state.isLogin==false">登录/注册</div>
            <!--登录后登录按钮变成用户昵称和头像-->
            <div class="login-btn" v-else>{{$store.state.userInfo.nickname}}</div>
            <!--用户头像-->
            <div class="demo-type">
<!--                未登录前显示默认头像-->
                <div class="head-pho-box" @click="dialogVisible = true" v-if="$store.state.isLogin==false">
                    <el-avatar icon="el-icon-user-solid"></el-avatar>
                </div>
<!--                登录后显示用户的头像-->
                <div class="head-pho-box" v-else>
                    <el-dropdown >
                        <span class="el-dropdown-link">
                            <img :src="$store.state.userInfo.avatarUrl" alt="">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <div @click="toPersonal"><el-dropdown-item>个人中心</el-dropdown-item></div>
                            <div @click="exit"><el-dropdown-item>退出登录</el-dropdown-item></div>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </div>
        </div>
<!--        登录页面-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="360px"
                >
               <div class="boxPop">
                   <el-tabs v-model="activeName">
<!--                       普通登录框-->
                       <el-tab-pane label="普通登录" name="first">
                           <el-input
                                   placeholder="请输入账号"
                                   prefix-icon="el-icon-user"
                                   class="loginInputs"
                                   v-model="loginAccount"
                                 >
                           </el-input>
                           <el-input
                                   placeholder="请输入密码"
                                   prefix-icon="el-icon-lock"
                                   class="loginInputs"
                                   v-model="loginPwd"
                                   type="password"
                           >
                           </el-input>
                           <div @click="commonWay()"><button class="loginBtn" id="commonLoginBtn">登 录</button>
                           </div>
                           <div class="logonAndForget">
                               <div class="toLogon">立即注册!</div>
                               <div class="forgetPwd" @click="toLogon()">忘记密码?</div>
                           </div>
                       </el-tab-pane>
<!--                       手机登录框-->
                       <el-tab-pane label="手机登录" name="second">
                           <el-input
                                   placeholder="请输入手机"
                                   prefix-icon="el-icon-user"
                                   class="loginInputs"
                                   v-model="loginPhone"
                                  >
                           </el-input>
                           <el-input
                                   placeholder="请输入验证码"
                                   prefix-icon="el-icon-user"
                                   id="codeInput"
                                   class="loginInputs"
                                   v-model="phoneLoginCode"
                                 >
                           </el-input>
                           <button id="getCode" @click="phoneLoginGetCode" ref="getCodeBtnFir">{{getCodeText}}</button>
                           <button class="loginBtn" id="phoneLoginBtn" @click="phoneLogin" @keydown.enter="phoneLogin">登录</button>
                           <div class="logonAndForget">
                               <div class="toLogon">立即注册!</div>
                               <div class="forgetPwd" @click="toLogon()">忘记密码?</div>
                           </div>
                       </el-tab-pane>
                   </el-tabs>
               </div>
        </el-dialog>
<!--        忘记密码-->
        <el-dialog
                :visible.sync="logonVisible"
                width="380px">
            <div id="logonBox">
                <div style="margin: auto;line-height: 48px; width: 154px;height: 48px;color: #00cf8c;border-bottom: 1px solid #00cf8c">忘记密码</div>
                <el-input placeholder="请输入账号" v-model="account" class="inputBox"></el-input>
                <el-input placeholder="请输入新密码" v-model="password" show-password class="inputBox"></el-input>
                <el-input placeholder="请再次输入新密码" v-model="makeSure" show-password class="inputBox"></el-input>
                <el-input placeholder="请输入手机号" v-model="phoneNum" class="inputBox"></el-input>
<!--                <el-input placeholder="请输入验证码" v-model="codes" class="inputBox" id="inputCode"></el-input>-->
                <input type="text" placeholder="请输入验证码" v-model="codes" id="inputCode">
                <button id="getCodes" @click="toGetCodes" ref="getCodeBtnSec">获取验证码</button>
                <div id="btnGroup">
                    <button id="makeSure" @click="changePwd">确定更改密码</button>
                </div>
                <div class="logonAndForget">
                    <div class="toLogon">立即注册!</div>
                    <div class="toLogin" @click="toLogin">去登录</div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import topNavlist from "./topNavlist";
    import {commonLogin, exitLogin, getCodes, phoneGetCode, phoneToLogin, toChange} from "../../api/topAdv";
    import buttonTiming from "../../api/common"
    import {getPersonal} from "../../api/personalCenter";
    export default {
        name: "topAdv",
        data(){
            return {
                dialogVisible: false,//登录框
                logonVisible:false,//注册框
                activeName: 'first',//先睡第几个
                loginAccount:"",//登录账号
                loginPwd:"",//普通登录密码
                account:"",
                password:'',
                makeSure:"",
                phoneNum:'',
                codes:"",
                loginPhone:"",
                phoneLoginCode:"",
                getCodeText:'获取验证码'
            }
        },
        methods:{
            //退出登录修改state里面的登录状态和用户信息
            exit() {
                   exitLogin().then(res=>{
                       if(res.code==0){
                           this.$store.commit("modifyLoginType",false);//登录状态设置为false
                           this.$store.commit("modifyUserinfo",{});//用户信息清空
                       }
                    this.$router.push({path:"/index"});
                   })
                // this.dialogVisible = true;
            },
            toPersonal(){
                this.$router.push({path:"/information"})
            }
            ,
            //跳转注册页面
            toLogon(){
                this.logonVisible = true;
                this.dialogVisible = false;
            },
            //跳转登录页面
            toLogin(){
                this.dialogVisible=true;
                this.logonVisible = false;
            },
            //修改密码获取验证码
            toGetCodes(){
                getCodes(this.account,this.phoneNum).then(res=>{
                    console.log(res)
                    if(res.msg=="操作成功"){
                        buttonTiming(this.$refs.getCodeBtnSec);
                        alert("发送成功，注意查收！");
                    }else{
                        alert("请检查信息是否填写完完整和手机号是否正确！");
                    }
                })
            },
            //修改密码
            changePwd(){
                toChange(this.account,this.password,this.phoneNum,this.codes).then(res=>{
                    if(res.msg=="操作成功"){
                        alert("修改成功，可以登录！")
                    }else{
                        alert("修改失败，请检查验证码是否输入正确！")
                    }
                })
            },
            //登录后保存用户信息
            saveUserinfo(r){
                if(r.code==0){
                    this.dialogVisible = false;
                    alert("登陆成功");
                    this.$store.commit("modifyLoginType",true);//修改登录状态
                    this.$store.commit("modifyUserinfo",r.userInfo);//保存用户信息
                }else{
                    alert("登录失败，请检查密码是否正确！")
                }
            },
            //普通登录
            commonWay(){
                commonLogin(this.loginAccount,this.loginPwd).then(res=>{
                    this.saveUserinfo(res);
                })
            },
            //手机号登录发送验证码
            phoneLoginGetCode(){
                phoneGetCode(this.loginPhone).then(res=>{
                    console.log(res);
                    if(res.code==0){
                        buttonTiming(this.$refs.getCodeBtnFir);
                        alert("发送成功，注意查收！");
                    }else{
                        alert("请检查手机号是否正确！")
                    }
                })
            },
            //获取手机号后登录
            phoneLogin(){
                phoneToLogin(this.loginPhone,this.phoneLoginCode).then(res=>{
                    this.saveUserinfo(res);
                })
            },
            //封装一个按钮倒计时的方法
            buttonTiming(ele,time){
                console.log(time)
                ele.disabled = true;
                let interval = setInterval(()=>{
                    ele.innerHTML = time;
                    if(time>0){
                        time--;
                    }else{
                        clearInterval(interval);
                        ele.disabled = false;
                        ele.innerHTML = this.getCodeText;
                    }
                },1000)
            }
        },
        components: {topNavlist},
        props:{
            isShow:Boolean
        },
        created() {

            getPersonal().then(res=>{
                if(res.code==0){
                    this.$store.state.userInfo = res.userInfo;
                }
            })
        }
    }
</script>

<style scoped lang="less">
    /deep/
    #inputCode{
        margin-top: 20px;
        margin-left: 10px;
        width: 150px;
        height: 30px;
        float: left;
        border: 1px solid lightgrey;
        text-indent: 1em;
    }
    #inputCode:focus{
        outline-color: lightskyblue;
        outline-width: 0.5px;
    }
    .inputBox{
        margin-top: 20px;
    }
    #getCodes{
        width: 100px;
        height: 32px;
        margin-top: 20px;
        background-color: #00cf8c;
        color: white;
    }
    #makeSure{
        margin-left: 10px;
        margin-top: 20px;
        float: left;
        height: 32px;
        width: 125px;
        background-color: #00cf8c;
        color: white;
    }
    #logonBox{
        width: 308px;
        height: 495px;
    }

    .ant-modal{
        top: 60px!important;
    }
    .el-tabs__nav-wrap::after{
        background-color: white;
    }
    /deep/
    .el-dialog__body{
        padding: 5px 30px;
    }
    /deep/
    .el-tabs__item.is-active{
        color: #00cf8c;
    }
    /deep/
    .el-tabs__item:hover{
        color: #00cf8c;
    }
    /deep/
    .el-tabs__active-bar{
        background-color: #00cf8c;
    }
    /deep/
    .el-tabs__nav{
        width: 100%;
    }
    /deep/
    .el-tabs__item{
        width: 50%;
    }
    /*普通登录输入框*/
    .loginInputs{
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /deep/
    .el-input__inner{
        width: 288px;
        height: 32px;
        border-radius: 0px;
    }
    /deep/
    .el-tabs__header{
        margin: 0px;
    }
    /deep/
    .el-input__prefix{
        top: -4px;
        left: 10px;
    }
    /deep/
    .el-tabs__content{
        overflow: visible;
    }
    /*按钮组*/
    .loginBtn{
        width: 288px;
        height: 32px;
        background-color: @hoverColor;
        color: white;
        cursor: pointer;
    }
    #commonLoginBtn{
        margin-top: 15px;
    }
    /*立即注册和忘记密码*/
    .logonAndForget{
        margin: 15px auto 30px;
        padding-top: 30px;
        width: 288px;
        height: 20px;
        overflow: hidden;
    }
    .toLogin{
        float: right;
        cursor: pointer;
        color: #999;
    }
    .toLogon{
        float: left;
    }
    .forgetPwd{
        float: right;
        text-align: right;
    }
    .toLogon,
    .forgetPwd{
        color: #999;
        cursor: pointer;
    }
    .toLogon:hover,
    .toLogin:hover,
    .forgetPwd:hover{
        color: #00cf8c;
    }
    /*手机登录框*/
    /deep/
    #codeInput{
        display: inline-block;
        width: 160px!important;
        position: relative;
        left: -64px;
    }
    #getCode{
        position: absolute;
        top: 77px;
        left: 178px;
        width: 115px;
        height: 32px;
        background-color: @hoverColor;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }
    #phoneLoginBtn{
        margin-top: 15px;
    }
    *{
        margin: 0;
        padding: 0;
        border: 0;
        ul{
            list-style: none;
        }
    }
    #header{
        display: flex;
        margin: auto;
        width: 1200px;
        height: 80px;
        background-color: #fff;
    }
    //logo盒子
    #logo-box{
        margin-top: 22px;
    }
    #logo-box,
    #logo-box>img{
        width: 180px;
        height: 55px;
    }
    //课程分类
    @hoverColor:#00cf8c;
    //搜索框
    #searchBox{
        display: flex;
        margin-top: 32px;
        width: 400px;
        height: 38px;
        }
    /deep/
    #topNavSearchInput{
        float: left;
        width: 300px !important;
        border-radius: 19px 0px 0px 19px;
        height: 38px;
    }
    .el-dropdown{
        font-size: 15px;
    }

    #topNavSearchBtn{
        width: 120px;
        background-color: @hoverColor;
        border: 0;
        border-radius: 0px 19px 19px 0px;
        color: white;
    }
    .el-button:hover{
        background-color: @hoverColor;
        color: white;
    }
    #login-box{
        display: flex;
        margin-left: 60px;
        margin-top: 40px;
        width: 153px;
        height: 35px;
        cursor: pointer;
    }
    .login-btn{
        display: block;
    }
    .head-pho-box{
        position: relative;
        top: -10px;
        left: 5px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #d3dce6;
        overflow: hidden;
        img{
            width: 40px;
            height: 40px;
        }
    }
    .marginLeft{
        margin-left: 200px !important;
    }
</style>